<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>材料申请审批详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../resources/css/style.css">
    <style>
        html,body,._MOVE{height: 100%;}
        body{background-color: #f5f5f5;}
        .details ul li {width: 50%;float: left;}
        .layui-table thead th{text-align: left;}
        .layui-table td{text-indent: 1rem; font-size: 12px; color: #333;}
        .detailed{background-color: #FFF; font-size: 12px; color: #333333; line-height: 24px;margin-top: 8px;}
        /*.details ul,li{list-style: inherit;}*/
        .detailed p:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
        }
        .detailed p:before {content: "● "; color: #e3e3e3; font-size: 12px; margin-right: 5px; float: left;}
        .detailed .detaL{width: 120px;display: inline-block; float: left;    padding-right: 20px;}
        .detailed .dataR{display: inline-block;float: left;}
        .detailed p{margin-bottom: 10px;}

        .detailedfoot ul {display: flex;justify-content: space-around;}
        .layui-table thead th{text-align: left;}

        .layui-table td{text-indent: 1rem; font-size: 12px; color: #333;}
        table tbody tr td{text-align: left;}
        .maskmain table td, th{text-align: left;}
        .detailedfoot{padding: 15px 35px;height:50%;overflow: auto;}
        .detailedfoot table tr {height: 40px; border-bottom: 1px solid #e3e3e3;}
        .engineering{width:100%;display: inline-block;float: left; padding: 0 10px;margin-left: -10px;height: 100%;margin-bottom: 20px;}
        .details{font-size: 16px;}
        /*.details ul{display: flex;justify-content: space-between;}*/
        .titles{height: 40px;line-height: 40px;font-size: 20px;}
        .detailwarp{padding-left:22px;}
        .MOVE_mainL,.MOVE_mainR{display: inline-block;}
        .MOVE_mainL{text-align: center;width: 30%;}
        .MOVE_mainR{text-align: left;width: 70%;}
        #MOVE_main{text-align: center;}
        #MOVE_main p{line-height: 30px;}
        .MOVE_table{width: 100%; overflow-x: auto;}
        .MOVE_table table{width: 200%!important; text-align: center;}
        .MOVE_table table thead tr{background-color: #F5F5F5; height: 40px;font-size: 15px;}
        .MOVE_table thead tr th{text-align: center;}
        .MOVE_table tbody tr td{text-align: center; height: 30px;line-height: 30px;}
        .MOVE_foot{height: 50px;background-color: #253147;position: absolute;bottom: 0;width: 100%;text-align: right;}
        .close{background-color: #253147;top:-16px;}
        .MOVE_title .shousuo{margin-right: 0;}
        @media screen and (max-width: 750px) {
            .MOVE_table{height: 60vh;}
            .xuanze {width: 80px;}
            .beizu,._num{width: 80px;}
            .layui-table thead tr th{text-align: left;text-indent: 1em;}
            .layui-table tbody tr td{text-align: left;text-indent: 1em;}
            .checkboxs{text-indent: 0!important;}
            .tijiaos{position: absolute;top: 0;right: 0; background-color: transparent;border: 0;font-size: 20px;
                height: 45px; line-height: 45px;margin-right: 15px!important;color: #FFF;}
            .layui-table thead th{text-align: left;padding: 0px;}

        }
        .titles{text-align: right;line-height: 34px;}
        .titles button{display: none;}
        .detailedfoot{width: auto;overflow: auto;padding: 0;}
        input{border: 0!important;}
        .detailed{margin-top: 20px;}
        /*.layui-btn{margin-bottom: 10px;margin-top: 10px;}*/
        body{padding-bottom: 0;padding-top: 0;}
        .mytable .layui-table-cell{
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
        }
        .layui-form-selected dl{
            z-index:10000!important;
        }
    </style>
</head>
<body>
<div class="_PC">
    <form class="layui-form layui-form-pane" action="" >
        <button class="layui-btn" type="button" onclick="history.back(-1);" style="margin-left: 24px;"><i class="layui-icon">
        </i></button>
        <button class="layui-btn layui-btn-danger tijiao" type="button" style="float: right;">编辑</button>
        <div class="detailwarp"></div>
        <!-- 数据修改操作  -->
        <div hidden class="editContent">
            <hr class="layui-bg-blue">
            <blockquote class="layui-elem-quote">
                下方功能仅能针对未发货的材料审核内容进行重修修改审核，已经发货的不能进行修改
                <br>请仔细审阅
            </blockquote>
            <table class="mytable layui-table layui-" id="editArea" >

            </table>
        </div>



    </form>
</div>

<script type="text/html" id="editBtn">
    <button class="layui-btn-danger layui-btn" >修改</button>
</script>
<script type="text/html" id="supSel">
    <select name="city" lay-verify="" lay-ignore lay-search >
        <option value="010">layer</option>
        <option value="021">form</option>
        <option value="0571" selected>layim</option>
    </select>
</script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="input" class="layui-input" name="sex" value="{{d.id}}" lay-skin="input" >
</script>

<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
<script src="../../../resources/js/style.js"></script>
<script src="../../../resources/js/api.js"></script>
<script>
    layui.use(['form', 'layedit','table', 'laydate','laytpl'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,table = layui.table
            ,layedit = layui.layedit
            ,laytpl=layui.laytpl
            ,laydate = layui.laydate;
        var materials1= new Object;       //创建新的对象接受值
        var materials2= new Object;       //创建新的对象接受值
        var materials3= new Object;       //创建新的对象接受值
        var materials4= new Object;       //创建新的对象接受值

        //获取返回来的数据进行渲染到页面上面
        var resultData = [];



        //监听全选
        form.on('checkbox(allChoose)', function(data){
            //console.log(data.elem); //得到checkbox原始DOM对象
            //console.log(data.elem.checked); //是否被选中，true或者false
            //console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            //console.log(data.othis); //得到美化后的DOM对象
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');         //找到tbody下的所有多选框
            child.each(function(index, item){                             //循环每个参数item  每个多选框
                item.checked = data.elem.checked;                         //所有多选框  选中或取消选中
//                $(item).trigger('click');
            });
            form.render('checkbox');                                      //局部刷新多选框  保持页面操作一致性
        });
        //监听单个点击多选
        form.on('checkbox(filter)', function(data){
            //console.log(data.elem); //得到checkbox原始DOM对象
            //console.log(data.elem.checked); //是否被选中，true或者false
            //console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            //console.log(data.othis); //得到美化后的DOM对象
            var _this=data.othis;
            var chuandi=new Object();
            chuandi.jia=$(_this).parents('tr').attr('idang');
            chuandi.id=$(_this).parents('tr').attr('id');
            chuandi.mat_id=$(_this).parents('tr').attr('mat_id');
            chuandi.names=_this.parents('th').next().text();
            chuandi.guige=_this.parents('th').next().next().text();
            chuandi.num=_this.parents('th').next().next().next().text();
            //console.log(chuandi)
            $('.tijiao').removeClass('layui-btn-disabled');



//            //console.log($(data.elem).parent(), 'is i======================== parent =')

            if(data.elem.checked){          //如果多选框被选中  给下半部添加内容
                $('.beixuan table tbody').append('<tr id="'+chuandi.id+'" mat_id="'+chuandi.mat_id+'" idang="'+chuandi.jia+'">\n' +
                    '                                    <th class="names">'+chuandi.names+'</th>\n' +
                    '                                    <th class="guige">'+chuandi.guige+'</th>\n' +
                    '                                    <th class="nums">\n' +
                    '                                        <input type="number" class="inputs" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                        <input type="hidden" class="numson" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                    </th>\n' +
                    '                                </tr>')
            }else{                          //否则循环下半部所有的tr删除对应的tr
                $('.beixuan table tbody tr').each(function () {
                    if($(this).attr('id')==chuandi.id){
                        $(this).remove();
                    }

                })
            }



        });
        $('.shousuo').click(function () {
            $('.MOVE_mask').show();
        });
        //提交监听
        var datas = {};   //新建一个对象  用以数据去重
        ajaxs('/api/matperson/gcMatFeedSel.do','post',{'type':sessionStorage.type,'remark': sessionStorage.remark,'p':getCookie('yanzheng')},function (data) {
            var gongchenggaikuo = '';
            //console.log(data,'>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
            var datas=data.data;
            resultData = datas;
            var materials1,materials2,materials3,materials4=new Object();
            materials1=data.fullDown.fullDown1;
            materials2=data.fullDown.fullDown2;
            materials3=data.fullDown.fullDown3;
            materials4=data.fullDown.fullDown4;
            for (var i=0;i<datas.length;i++) {                      //循环获取对象的某一个
                if(i==0){
                    $('.detailwarp').append('<div class="engineering">' +           //添加共有部分
                        '    <div class="titles" names="11" style="display: none;">11</div>' +
                        '    </div>');
                }
                if (i == 0) {                                               //判断是否是第一次渲染
                    $("[names='11']").after('<div class="details">\n' +
                        '        <ul>\n' +
                        '            <li><span class=\'detaL\'>供料单号：</span><span class="dataR">' + datas[i].feed_Code + '</span></li>\n' +
                        '            <li><span class=\'detaL\'>项目名称：</span><span class="dataR">' + datas[i].eppName + '(' + datas[i].eppStaEnd +')'+ '</span></li>' +
                        '            <li><span class=\'detaL\'>施工单位：</span><span class="dataR">' + datas[i].compName1+'</span></li>' +
                        '            <li><span class=\'detaL\'>供货时间：</span><span class="dataR">' + datas[i].supply_Time + '</span></li>\n' +
                        '            <li><span class=\'detaL\'>收货地址：</span><span class="dataR">' + sessionStorage.f_adr + '</span></li>\n' +
                        '        </ul>\n' +
                        '    </div>' +
                        ' <div class="detailed">\n' +
                        '    </div>' +
                        ' <div class="detailedfoot">' +
                        '<table class="layui-table table">\n' +
                        '           <thead class="detailedfoot_thea">\n' +
                        '               <th style="width:100px;text-align: center;">材料名称</th>\n' +
                        '               <th style="width:60px;text-align: center;">材料规格</th>\n' +
                        '               <th style="width:60px;text-align: center;">计量单位</th>\n' +
                        '               <th style="width:80px;">申请人</th>\n' +
                        '               <th style="width:80px;">审核状态</th>\n' +
                        '               <th style="width:60px;">申请数量</th>\n' +
                        '               <th style="width: 50px;">审核量</th>\n' +
                        '               <th style="width:230px;">材料供应商</th>\n' +
                        '               <th style="width:80px;">审核状态</th>\n' +
                        '               <th style="width:80px;">审核意见</th>\n' +

                        '           </thead>\n' +
                        '<tbody></tbody>' +
                        '</table>' +
                        '</div>')
                }
                switch (datas[i].validate) {             //判断状态
                    case -1:
                        datas[i].validate = '审核中';
                        break;
                    case 0:
                        datas[i].validate = '通过';
                        break;
                    case 1:
                        datas[i].validate = '不通过';
                        break;
                    case 2:
                        datas[i].validate = '已发货';
                        break;
                };
                //添加非共有部分
                $("[names='11']").next().next().next().children().children('tbody').append(' <tr _id="'+datas[i].id+'" matType="'+datas[i].mat_Type+'">\n' +
                    '        <td>' + datas[i].mat_Name + '</td>\n' +
                    '        <td>' + datas[i].mat_Spec + '</td>\n' +
                    '        <td>' + datas[i].mat_Bit + '</td>\n' +
                    '        <td>' + datas[i].feed_sqr + '</td>\n' +
                    '             <td>' + datas[i].validate + '</td>\n' +
                    '           <td>' + datas[i].feed_Num + '</td>\n' +
                    '        <td class="shenheliang kedong">'+datas[i].feed_Num+'</td>\n' +
                    '        <td class="cailiao kedong" mat_Type="mat_Type">'+datas[i].compName+'</td>\n' +
                    '        <td class="zhuantai kedong"><input type="text" disabled="disabled" class="layui-input"/></td>\n' +
                    '        <td class="yijian kedong"><input type="text" disabled="disabled" class="layui-input"/>'+datas[i].valOpition+'</td>\n' +
                    '    </tr>')

                $('.cailiao').eq(i).html(datas[i].compName);
                $('.zhuantai').eq(i).html(datas[i].validate);
                $('.yijian').eq(i).html(datas[i].valOpition);
            };
            form.render();


            $('.detailedfoot table tbody tr').each(function () {            //循环所有的tr
                var datas=new Object;               //创建新对象 接受数据以便填充页面
                //判断当前的值  去获取之前加载的数据

                switch ($(this).attr('mattype')){
                    case '1':
                        datas=materials1;
                        break;
                    case '2':
                        datas=materials2;
                        break;
                    case '3':
                        datas=materials3;
                        break;
                    case '4':
                        datas=materials4;
                        break;
                }
                for(var i=0;i<datas.length;i++){
                    $(this).children('.cailiao').children('select').append('<option value="'+datas[i].compid+'">'+datas[i].compName+'</option>')
                }
                form.render('select');
                //循环加载下拉列表

                //刷下下拉
            });


        });

//        $('input').attr('disabled ','disabled ');
        //为所有按钮绑定事件
        $('.tijiao').on('click', function(){
            $(".editContent").removeAttr("hidden");
            //展示已知数据
            table.render({
                elem: '#editArea'
                ,text:{
                    none:'未加载到可以修改的数据'
                }
                ,cols: [[
                    {field: 'mat_Name', title: '材料名称', width: 200 }
                    ,{field: 'mat_Spec', title: '材料规格', width: 120}
                    ,{field: 'mat_Bit', title: '计量单位', width: 100}
                    ,{field: 'feed_sqr', title: '申请人', minWidth: 100}
                    ,{field: 'feed_Num', title: '申请数量', width: 100}
                    ,{field: 'fv_Num', title: '审核量', width: 100}
                    ,{field: 'sup_Code', title: '材料供货商', width: 150,templet:'#supSel'}
                    ,{field: 'validate', title: '审核状态', width: 100, templet:function (d) {
                        return '<div><select class="layui-select"><option value="0" {{d.validate==0?"selected":""}}>审核通过</option><option value="1" {{d.validate==1?"selected":""}}>审核不通过</option></select></div>';
                    }}
                    ,{field: 'valOpition', title: '审核意见', width: 100, templet:'<div><input type="input" class="layui-input" name="sex" value="{{d.valOpition}}" lay-skin="input" ></div>'}
                    ,{field: 'edit', title:'操作', align:'center', templet: '#editBtn', width: 120, unresize: true}
                ]]
                ,data: resultData
                //,skin: 'line' //表格风格
                ,even: true
            });

            form.render('select');
        });


    });
</script>

</body>
</html>